import React from "react";
import { useNavigate } from "react-router-dom";
import { Form, Input, Button } from "antd";
import OpenApi from '../../utils/api.jsx'; // 导入API函数
import "./register.css";

const Register = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const handleRegister = async () => {
    try {
      const values = form.getFieldsValue();
      const { user_name, realname, mobile, password, eq_password, identify } = values;
      const response = await OpenApi.register(user_name, realname, mobile, password, eq_password, identify);
      console.log(response);
      navigate("/login");
    } catch (error) {
      console.error('Error registering user:', error);
    }
  };

  const redirectToLogin = () => {
    navigate("/login");
  };

  return (
    <div className="container">
      <div className="register-wrapper">
        <div className="header">欢 迎 注 册</div>
        <Form form={form}>
          <div className="form-wrapper">
            <Form.Item
              label="用 户 名"
              name="user_name"
              rules={[
                {
                  required: true,
                  message: "用户名不能为空",
                },
                {
                  min: 2,
                  max: 6,
                  message: "用户名长度必须在2到6位之间",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="手 机 号"
              name="mobile"
              rules={[
                {
                  required: true,
                  message: "手机号不能为空",
                },
                {
                  pattern: /^\d{11}$/,
                  message: "请输入正确的手机号",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "密码不能为空",
                },
                {
                  validator: (_, value) =>
                    value && !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/.test(value)
                      ? Promise.reject(
                          new Error('密码长度必须在6到10个字符之间,并且包含至少一个字母和一个数字')
                        )
                      : Promise.resolve()                  
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              label="确认密码"
              name="eq_password"
              dependencies={['password']} // 确保当'password'字段更改时触发验证
              rules={[
                {
                  required: true,
                  message: '密码不能为空',
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入的密码不一致!'));
                  },
                }),
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              label="真实姓名"
              name="realname"
              rules={[
                {
                  required: true,
                  message: "真实姓名不能为空",
                },
                {
                  pattern: /^[^\d]+$/,
                  message: "请输入您的真实姓名",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="身份证号码"
              name="identify"
              rules={[
                {
                  required: true,
                  message: "身份证号码不能为空",
                },
                {
                  pattern: /^\d{18}$/,
                  message: "请输入正确的身份证号码",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <div className="btn">
              <Button
                type="primary"
                htmlType="submit"
                onClick={handleRegister}
              >
                注册
              </Button>
            </div>
          </div>
        </Form>
        <div className="msg">
          已有账户?
          <a href="/login" onClick={redirectToLogin}>点 击 登 录</a>
        </div>
      </div>
    </div>
  );
};

export default Register;
